.table-responsive {
  overflow-x: auto;
  /* Enable horizontal scrolling on small screens */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling for iOS */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #17549A;
}


@media (max-width: 768px) {

  th,
  td {
    display: block;
    /* Stack cells on small screens */
    width: 100%;
  }

  th {
    position: absolute;
    /* Position the headers above the cells */
    left: -9999px;
    /* Hide headers */
  }

  td {
    text-align: right;
    position: relative;
    padding-left: 50%;
    /* Add space for pseudo element */
  }

  td::before {
    content: attr(data-label);
    /* Use data-label for header */
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    /* Padding for the label */
    text-align: left;
    font-weight: bold;
  }
}

/* Hide image on small and medium devices */
@media (max-width: 1334px) {
  .large-only {
    display: none !important;
  }
}